<template>
	<view>
		<view class="complaininfor">
			<view class="box1">
				投诉类型
			</view>
			<block v-for="(item,index) in tousu">
				<text :class="isactive==index ? 'box active':'box'" @click="type(index)">{{item}}</text>
			</block>
		</view>
		<textarea value="" placeholder="输入投诉详细说明(选填)" class="textarea" auto-focus="" />
		<view class="dp fw">
			<image :src="item" class="imgitem ml5 mt5" v-if="isshow" v-for="(item,index) in imglist" :key=index></image>
			<view class="imgbutton ml5 mt5" @click="upimg">
				<text class="f40">+</text>
				<text class="f12">还可以上传8张</text>
			</view>
		</view>
		<view class="submit" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	import {
		imgUrl,
		baseUrl
	} from "@/utils/utils.js"
	export default {
		data() {
			return {
				tousu: ['服务态度', '菜品问题', '付款问题'], //投诉类型
				isshow: false, //是否隐层图片
				imglist: [], //图片列表
				isactive:-1  //投诉类型是否被选中
			}
		},
		methods: {
			//投诉类型
			type(index){
				this.isactive=index
			},
			//上传图片
			upimg() {
				let _this = this
				uni.chooseImage({
					count: 6, //可以选中照片的数量
					sizeType: ['original', 'compressed'], //可以指定是原图original还是压缩图compressed，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						_this.tempFilePaths = res.tempFilePaths,
							//微信官方上传的api
							_this.tempFilePaths.forEach(item => {
								//文件上传
								uni.uploadFile({
									url: baseUrl + '/plugs/uploads',
									filePath: item, //上传的文件列表
									name: "files", //后端需要的key,跟后端服务器对应
									success: (res) => {
										_this.isshow = true
										let resData = JSON.parse(res.data)
										_this.imglist.push(imgUrl + resData.data)
									}
								});
							})

					}
				});
			},
			//点击提交
			submit(){
			if(this.isactive !=-1 &&this.imglist.length !=0 ){
				uni.showToast({
				    title: '投诉成功',
				    duration: 2000,
					success(){
					setTimeout(()=>{
						uni.switchTab({
						    url: '/pages/mine/mine'
						});
					},1000)
					}
				});
			}else{
			uni.showLoading({
			    title: '信息未填全',
				duration:2000,
			});
			}
			}
		}
		
	}
</script>

<style>
	.complaininfor {
		padding: 10px 0 20px 10px;
		border-bottom: 1px solid #eee;
	}

	.box {
		border: 1px solid #eee;
		border-radius: 15px;
		padding: 5px 10px;
		color: #9E9E9E;
		margin-right: 10px;
	}

	.box1 {
		padding: 0px 0 20px 0;
		font-weight: bold;
	}

	.textarea {
		width: 90%;
		margin: 10px auto;
	}

	.imgitem {
		width: 90px;
		height: 90px;
	}

	.imgbutton {
		width: 90px;
		height: 90px;
		background-color: #F3F3F3;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.submit{width: 100%;
	height: 40px;
	text-align: center;
	line-height: 40px;
	position: fixed;
	bottom: 0;left: 0;background-color:#FD6453;color: #fff;}
	.active{
		background-color: #FD6453;
		color: #fff;
		border: 1px solid #FD6453;
	}
</style>
